<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css"
			tppabs="http://res.layui.com/layui/dist/css/layui.css" media="all">
		<script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

		<!--引入 element-ui 的样式，-->
		<link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
		<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
		<!-- 引入element 的组件库-->
		<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

		<script type="text/javascript" src="/admin/js-css/js/mx1.0.js"></script>
		<script type="text/javascript" src="/admin/js-css/js/mx1.0.1.js"></script>
		<script type="text/javascript" src="/admin/js-css/js/upload.js?v=1.3"></script>

		<style>
			.new-block {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 5px;
			}

			.new-block input {
				width: 100px;
				height: 32px;
				line-height: 32px;
				border-radius: 5px;
				padding-left: 5px;
				border: 1px solid #ddd;
				font-size: 12px;
				margin-left: 10px;
			}

			.code-title {
				display: flex;
				justify-content: space-between;
				padding: 5px 10px;
				text-align: center;
			}
			.code-title .left{
				width: 50%;
			}
			.code-title .center{
				width: 25%;
			}
			.code-title .right{
				width: 25%;
			}
		</style>
	</head>
	<body>

		<div id="app">

			<div>
				<div class="layui-transfer layui-form layui-border-box" lay-filter="LAY-transfer-1">
					<div class="layui-transfer-box" data-index="0" style="width: 200px; height: 360px;">
						<div class="layui-transfer-header"><input type="checkbox" name="layTransferLeftCheckAll"
								lay-filter="layTransferCheckbox" lay-type="all" lay-skin="primary" title="未选择字段">
							<div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>未选择字段</span><i
									class="layui-icon layui-icon-ok"></i></div>
						</div>

						<ul class="layui-transfer-data" style="height: 267px;">
							<li v-for="item in leftList"><input type="checkbox"  name="layTransferLeftCheck" lay-skin="primary"
									lay-filter="layTransferCheckbox" :title="item.show_name" :value="item.id" >
								<div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>{{item.show_name}}</span><i
										class="layui-icon layui-icon-ok"></i></div>
							</li>

						</ul>
					</div>
					<div class="layui-transfer-active">
						<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn" @click="addRow"
							data-index="0"><i class="layui-icon layui-icon-next"></i></button>
						<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn" @click="deleteRow"
							data-index="1"><i class="layui-icon layui-icon-prev"></i></button>
					</div>
					<div class="layui-transfer-box" data-index="1" style="width: 450px; height: 360px;">
						<div class="layui-transfer-header"><input type="checkbox" name="layTransferRightCheckAll"
								lay-filter="layTransferCheckbox" lay-type="all" lay-skin="primary" title="已选择字段">
							<div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>已选择字段</span><i
									class="layui-icon layui-icon-ok"></i></div>
						</div>

						<div class="code-title">
							<div class="left">字段名称</div>
							<div class="center">排序号</div>
							<div class="right">排序方式</div>
						</div>
						<ul class="layui-transfer-data" style="height: 267px;">

							<li v-for="(item,index) in rightList" class="new-block">
								<input type="checkbox"  lay-skin="primary" name="layTransferRightCheck"
									lay-filter="layTransferCheckbox" :title="item.show_name" :value="item.id" >
								<div class="layui-unselect layui-form-checkbox" lay-skin="primary">
									<span>{{item.show_name}}</span>
									<i class="layui-icon layui-icon-ok"></i>

								</div>
								<input type="text" v-model="item.pxh" placeholder="排序号">

								<el-select  filterable style="'width:200px;'"
										   v-model="rightList[index].gz"  >
									<el-option value="desc" label="倒序" ></el-option>
									<el-option value="asc" label="顺序" ></el-option>
								</el-select>

							</li>
						</ul>
					</div>
				</div>
			</div>

		</div>





		<script>
			var form = null;
			var $ = null;
			let parms = getParams();

			var vm = new Vue({
				el: '#app',
				data: {
					leftList:[],
					rightList:[]
				},
				created() {
					this.init();
				},
				methods: {
					init() {
						layui.use(["jquery","form"],async function (){
							form = layui.form;
							$ = layui.$ //重点处
							let res = await post("/admin/api/SortCustomManagementController/customSortingDataRendering",{tableId:parms.tableId})
							vm.leftList = res.data.leftList;
							vm.rightList = res.data.listcustom;
							vm.$nextTick(function (){
								form.render();
							})

						})
					},
					chks(name){
						var chk = $("[name="+name+"]");
						var ids = [];
						for(var a=0;a<chk.length;a++){
							var check = $(chk[a]).is(':checked');
							if(check){
								ids.push($(chk[a]).val());
							}
						}
						return ids;
					},
					async addRow(){
						let ids = vm.chks("layTransferLeftCheck");
						if(ids.length == 0){
							top.alert("请选择字段");
							return
						}
						let i = load();
						const res = await post("/admin/api/SortCustomManagementController/addRow",{ids:""+ids});
						layer.close(i);
						if(res.code == 0){
							top.alert(res.msg);
						}else {
							this.init();
						}
					},
					async deleteRow(){
						let ids = vm.chks("layTransferRightCheck");
						if(ids.length == 0){
							top.alert("请选择字段");
							return
						}
						let i = load();
						const res = await post("/admin/api/SortCustomManagementController/deleteRow",{ids:""+ids});
						layer.close(i);
						if(res.code == 0){
							top.alert(res.msg);
						}else {
							this.init();
						}
					}
				},
				watch: {

				}
			})


			function getData(){
				return vm.rightList;
			}
		</script>

	</body>
</html>
